<template>
    <el-affix :offset="0" class="animate__animated animate__slideInDown">
        <el-menu router :default-active="$route.path" class="el-menu-demo" mode="horizontal" :ellipsis="false"
            @select="handleSelect">
            <div index="/home/console">
                <img @click="goHome" src="/assets/images/logo-main.svg" id="logo">
            </div>
            <div class="flex-grow wos-flex wos-flex-center">
                <div class="wos-font-sm">
                    &nbsp;
                </div>
            </div>
            <el-menu-item index="/home/console">
              <div class="kongzhitai">控制台</div>
            </el-menu-item>
            <solt v-for="(item, index) in routerInfo" :key="index" :index="index">
                <el-sub-menu :index="index" v-if="item['children']">
                    <template #title>{{item['meta']['title']}}</template>
                    <el-menu-item  v-for="child in item['children']" :index="child['path']" v-show="child['hidden'] == 0" >
                       {{child['meta']['title']}}
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item index="/home/console" v-else>
                    <div class="kongzhitai">{{item['meta']['title']}}</div>
                </el-menu-item>
            </solt>

            <el-sub-menu index="99">
                <template #title>
                  <el-avatar :src="user['avatar'] ? 'http://180.76.175.49:10000/prod-api/' + user['avatar'] : ''">{{nickName}}</el-avatar>
                </template>
                <el-menu-item index="/home/user">修改信息</el-menu-item>
                <el-menu-item @click="menuShowSwitch">导航（展开/收起）</el-menu-item>
                <el-menu-item @click="logoff">注销登陆</el-menu-item>
            </el-sub-menu>
        </el-menu>
    </el-affix>
</template>
  
<script lang="ts" setup>
import { ref, onMounted } from 'vue'


import {useRouter} from "vue-router";
const router=useRouter()

import store from 'store'
import {useSystem} from "@/stores/system/index"
import {logout} from "@/api/user.ts";
const storeSystem = useSystem()

let user:any = ref({})
let routerInfo = ref({})
let nickName = ref('')
// const handleSelect = (key: any, keyPath: any) => {
//     tell.log(key, keyPath)
// }

onMounted( () =>{
    user.value = store.get('user')
    routerInfo.value = store.get('routerInfo')
    nickName.value = user.value.nickName.length > 2 ? user.value.nickName.slice(-2) : user.value.nickName
})
function goHome(){
    router.push({path: '/home/console'})
}
function logoff(){
    logout(user.value.userId)
    store.clearAll()
    router.push({ path: '/login' })
}
const menuShowSwitch = () => {
  storeSystem.menuShowSwitch()
}

const handleSelect = () =>{

}

</script>

<style>
.flex-grow {
    flex-grow: 1;
    color: rgb(244, 244, 244);
}
#logo{
    height: 62px;
    margin-left: 20px;
    display: block;
}
.kongzhitai{
    line-height: 60px;
    font-size: 14px;
}
</style>
  